<template>
	<view>
		<view class="u-content">
			<view class="u-title">
				<h2>{{article.title}}</h2>
				<view class="u-flex u-subtitle">
					<p class="u-line-2 u-flex-1" v-if="article.desc">{{article.desc}}</p>
					<p>{{$u.timeFormat(article.created, 'yyyy-mm-dd')}}</p>
				</view>
			</view>
			<u-parse :html="article.content" :tag-style="style"></u-parse>
		</view>
		<view>
			<!-- <view class="store-ad-box">
				<view class="lists">
					<text class="u-skeleton-rect"><b>{{shop.name}}</b>: {{shop.store_introduction}}</text>
				</view>
				<u-line></u-line>
				<view class="store-info">
					<view class="calculation-data">
						<view class="data-title u-skeleton-rect">营业时间</view>
						<view class="data-text u-skeleton-rect">{{shop.time1}} - {{shop.time2}}</view>
					</view>
					<view class="calculation-data">
						<view class="data-title u-skeleton-rect">门店地址</view>
						<view class="data-text u-skeleton-rect">
							<text>{{shop.address}}</text> <u-button size='mini' shape="circle" style="margin-left:.5em"
								@click="openLocation">查看位置</u-button>
						</view>
					</view>
					<view class="calculation-data" v-if="shop.store_call1">
						<view class="data-title u-skeleton-rect">商家电话</view>
						<view class="data-text u-skeleton-rect"><text v-if="shop.store_call1"
								@click="makeCall(shop.store_call1)">{{shop.store_call1}} </text>
							<u-button size='mini' shape="circle" style="margin-left:.5em"
								@click="makeCall(shop.store_call1)">拨打电话</u-button>
						</view>
					</view>
					<view class="calculation-data" v-if="shop.store_call2">
						<view class="data-title"></view>
						<view class="data-text u-skeleton-rect"><text v-if="shop.store_call2"
								@click="makeCall(shop.store_call2)">{{shop.store_call2}} </text>
							<u-button size='mini' shape="circle" style="margin-left:.5em"
								@click="makeCall(shop.store_call2)">拨打电话</u-button>
						</view>
					</view>
					<view class="calculation-data" v-if="shop.delivery_introduction">
						<view class="data-title u-skeleton-rect">配送服务</view>
						<view class="data-text u-skeleton-rect"><text>{{shop.delivery_introduction}}</text></view>
					</view>
				</view>
			</view>
			<u-line></u-line> -->
			<!-- <view class="store-ad-box">
				<view class="lists" v-if="shop.wx_qrcode">
					<view class="u-padding-50 u-flex" style="justify-content: center;">
						<u-image :src="shop.wx_qrcode" width="320" class="u-skeleton-rect" mode="widthFix"></u-image>
					</view>

					<u-alert-tips type="success" class="u-skeleton-rect" title="长按识别二维码, 关注马孚博士爱车会"
						description=""></u-alert-tips>
				</view>
				<view class="u-skeleton-rect" style="margin-top:30rpx;">
					<map style="width: 100%; height: 300px;" title="马孚博士爱车会" :enable-traffic="true" :latitude="latitude" :longitude="longitude"
						:markers="covers">
					</map>
				</view>
			</view> -->
		</view>
		<uni-fab :pattern="pattern" :content="buttonContent" horizontal="left" vertical="bottom"
			direction="vertical" @trigger="trigger"></uni-fab>
		<wx-share :title='pageTitle' :desc="shareDesc" :imgUrl="shareCover" :link="currentPage" ref="wxs"></wx-share>
		<u-modal v-model="showQrCode" title="长按二维码关注公众号">
			<view class="slot-content u-flex" style="align-items: center;justify-content: center;">
				<img :src="shop.wx_qrcode">
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pattern: {
					color: "#3c3e49",
					buttonColor: "red"
				},
				buttonContent: [
					{text:'首页',active:false,iconPath:'/static/images/home-1.png',selectedIconPath:'/static/images/home-1.png'},
					// {text:'购物车',active:false,iconPath:'/static/images/shop-cart-0.png',selectedIconPath:'/static/images/shop-cart-1.png'},
					{text:'关注',active:false,iconPath:'/static/images/qrcode-1.png',selectedIconPath:'/static/images/qrcode-1.png'},
					{text:'会员',active:false,iconPath:'/static/images/user-1.png',selectedIconPath:'/static/images/user-1.png'}

				],
				style: {
					// 字符串的形式
					p: 'font-size:32rpx;line-height: 1.8;',
					img: 'max-width: 100%'
				},
				showQrCode: false,
				currentPage: location.href,
				articleId: '',
				shop: {},
				user: {},
				article: {},
				latitude: 30.71642,
				longitude: 103.99092,
				covers: [{
					latitude: 30.71642,
					longitude: 103.99092,
					iconPath: '../../static/location.png',
					width: 24,
					height: 24
				}]
			}
		},
		onLoad(options) {
			this.getShop()
			this.getUserInfo()
			// const info = uni.getSystemInfoSync()
			// this.windowWidth = info.windowWidth
			this.articleId = options.id;
			this.getArticle();
		},
		computed: {
			pageTitle() {
				if (this.article.title) {
					return this.article.title
				}
				if (this.shop.name) {
					return this.shop.name + ' - 马孚博士爱车会'
				}
				return '马孚博士爱车会'
			},
			shareDesc() {
				if (this.article.desc) {
					return this.article.desc
				}
				if (this.shop.order_footer_text) {
					return this.shop.order_footer_text
				}
				return this.shop.store_introduction
			},
			shareCover() {
				if(this.article.cover) {
					return this.article.cover
				}
				if(this.shop.cover){
					return this.shop.cover
				}
				return this.user.avatar
			}
		},
		methods: {
			trigger(e) {
				console.log(e)
				if(e.index===0){
					this.switchTab('/pages/custom/custom')
				}else if(e.index===1){
					this.showQrCode = true;
					// this.switchTab('/pages/buy/cart')
				}else if(e.index===2){
					this.switchTab('/pages/ucp/index')
				}else if(e.index===3){

				}
			},
			getUserInfo() {
				this.$u.post('/user/info', {}).then(res => {
					this.user = res;
					if (this.user.referral_id == 0) {
						this.user.referral_id = '';
					}
				}).catch(e => {
					console.log(e)
				})
			},
			getShop() {
				this.$u.post('/shopping/shop-setting', {}).then(res => {
					this.shop = res;
				}).catch(e => {

				})
			},
			getArticle() {
				this.$u.post('/article/detail', {
					id: this.articleId
				}).then(res => {
					this.article = res;
					// uni.setNavigationBarTitle({
					// 	title: res.title
					// });
				}).catch(e => {

				})
			},
			switchTab(jumpURL) {
				uni.switchTab({
					url: jumpURL
				})
			},
			openLocation() {
				if (!this.shop.lat || !this.shop.lng) {
					console.log('open location false;')
					return false;
				}
				let that = this;
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: function(res) {
						console.log(res)
						const latitude = parseFloat(that.shop.lat);
						const longitude = parseFloat(that.shop.lng);
						uni.openLocation({
							latitude: latitude,
							longitude: longitude,
							name: that.shop.name,
							address: that.shop.address,
							success: function() {
								console.log('success');
							}
						});
					}
				});
			},
			makeCall(phoneNumber) {
				uni.makePhoneCall({
					phoneNumber: phoneNumber //仅为示例
				});
			}

		}
	}
</script>

<style lang="scss">
	.u-content {
		padding: 32rpx;
		box-sizing: border-box;
		margin-bottom: 50rpx;

		.u-title {
			margin-bottom: 30rpx;

			.u-subtitle p {
				font-size: 0.9em;
				font-weight: 400;
				color: rgba(0, 0, 0, .73);
				line-height: 2;
			}
		}
	}
	.store-ad-box{
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #F5F5F5;
	}
	.store-info {
		border-radius: 10rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;

		.bold {
			font-weight: bold;
			border-bottom: 1rpx solid #c9c8d2;
		}

		.calculation-data {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding-top: 30rpx;
			// margin-bottom: 10rpx;

			.data-title {
				width: 6em;
				font-weight: bold;
			}

			.data-text {
				flex: 1;
				display: flex;
				uni-text{
					flex:1
				}
			}
		}

	}
</style>
